<html>
<head>
    <title>html 文档结构 </title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
            <input type="button" name="bt" value="确认①" onclick="handleClick(event)" />
            <input type="button" name="bt" id="button2" value="确认②" />
        </div>
        <div id="todogroup">
      
        </div>
        <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')">
        </div>
    </div>
</body>
<script lang="javascript">
    var intCnt = 0;
    function init() {
        document.getElementById("button2").onclick = handleClick;

    }

    function keyup(e){
        console.log(e);

        if(e.keyCode==13){
            handleClick(e);
        }
    }
    
    function handleClick(e) {
        console.log('handleClick');
        console.log(e);
        var temp = getValue();
        var div = document.createElement('div');
        // div.innerText = temp;
        // document.getElementById("todogroup").append(div);

        document.getElementById("todogroup").innerHTML +="<div class='item' div id='todo"
        + intCnt+"'><input type ='checkbox' name='todocheck'><div class='item-value'>"
        + temp+ "</div><button class='item-del' type='button' onclick='deletByIndex("
        + intCnt+")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;

        // document.getElementsByClassName("main")[0].style="background-color; #333333;";
    }
    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }
    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();
    }

    function enter(id){
        document.getElementById(id).style='background-color:#3e3e3e';
    }

    function leave(id){
        document.getElementById(id).style='background-color:aliceblue';
    }
    init();
</script>
<style>
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .main{
        background-color: #61f2ff;
        padding: 8px;
        border: 1px solid #333333;
        border-radius: 8px;
    }

    .row{
        display: flex;
    }

    .item{
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
        border-radius: 3px;
        background-color: #f6ff78;
    }

    .item:hover{
        background-color: #f059f3;
        transform: scale(1.3);
    }
    .item-value{
        flex-grow: 1;
        color: #000000;
    }

    .item-del{
        color: rgb(255, 255, 255);
        background-color: rgb(240, 120, 120);
        border: 0px;
        opacity: 0;

    }

    .item:hover .item-del{
        opacity: 1;
    }

    .input{
        padding:8px;
        outline: none;
        border: 2px solid #b1a1a1;
    }

    .input:focus{
        box-shadow: 0px 0px 10px #ecf664;
        border: 2px solid #87c0cf;
    }
</style>

</html>